<template>
  <div class="container">
    <el-form
      ref="searchForm"
      :model="searchForm"
      size="small"
      label-width="100px"
      class="demo-ruleForm"
      :inline="true"
    >
      <el-form-item label="批次号" label-width="70px">
        <el-input
          v-model="searchParam.batch"
          placeholder="批次号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="等级" label-width="70px">
        <el-input
          v-model="searchParam.grade"
          placeholder="等级"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="submitsearch('searchForm')"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="myTable">
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        ref="tableList"
        class="no-hover-effect"
        v-loading="loading"
      >
        <el-table-column
          type="index"
          label="#"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column align="center" prop="batch" label="批次号">
        </el-table-column>
        <el-table-column align="center" prop="grade" label="等级">
        </el-table-column>
        <el-table-column
          align="center"
          prop="resulta"
          label="204-线膨胀系数（1）"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="resultb"
          label="205-线膨胀系数（2）"
        >
        </el-table-column>
        <el-table-column align="center" prop="resultc" label="206-玻璃化温度">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.status == 0
                  ? "待执行"
                  : scope.row.status == 1
                  ? "执行中"
                  : scope.row.status == 2
                  ? "已完成"
                  : scope.row.status == 3
                  ? "已失效"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  findAllTask,
  getTaskPage,
  getMaterialByBatchAndGrade,
  getMaterialByDate,
  syncData,
  findBatchByTaskId,
} from "@/api/task";
import { errMsg, succMsg } from "../../utils/message";
import hasDirective from "/src/directive/permission/btnPermiss.js";
import moment from "moment";
import { string } from "clipboard";

export default {
  directives: {
    has: hasDirective,
  },
  data() {
    return {
      searchParam: {
        batch: "",
        grade: "",
      },
      dateRange: [], //日期范围
      dialogShow: false,
      dialogTitle: "",
      formType: "",
      btnText: "确认",
      formData: {},
      oldFormData: {},
      loading: false,
      tableData: [],
      taskStatus: [
        {
          id: 1,
          name: "全部成功",
        },
        {
          id: 2,
          name: "部分失败",
        },
      ],
      syncLoading: false,
    };
  },
  created() {},
  methods: {
    submitsearch(formName) {
      if (
        (this.searchParam.batch == "" || this.searchParam.batch == null) &&
        (this.searchParam.grade == "" || this.searchParam.grade == null)
      ) {
        this.$message.warning("请输入批次号或等级搜索");
        this.tableData = []
      } else {
        this.searchClick();
      }
    },
    searchClick() {
      getMaterialByBatchAndGrade({
        batch: this.searchParam.batch,
        grade: this.searchParam.grade,
      }).then((res) => {
        this.loading = false;
        if (res.code == "00000") {
          this.tableData = res.data;
          // this.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 20px;
}

.btsbox {
  margin-top: 40px;
  display: flex;
  justify-content: space-evenly;
}

.checkitem {
  margin-top: 20px;
}

.el-checkbox-group {
  padding-left: 30%;
}

.el-checkbox__inner {
  margin-right: 19px;
}

.search {
  margin-top: 20px;
  padding: 30px 20px 30px 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

.myTable {
  margin-top: 30px;
  padding: 1px 20px 30px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.out_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.open_box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
